<template>
  <div id="box">
    <div class="top">
      <icon name="arrow-left" @click="onCike" />
      <p id="p1">贡献信息</p>
    </div>
    <div class="information">
      <img
        src="https://img0.baidu.com/it/u=1675568842,1724763633&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
        alt=""
        class="m1"
      />
      <p id="p2">南宫晓风</p>
      <button id="btn">贡献记录</button>
    </div>
    <div class="center">
      <p id="p3">做任务</p>
      <grid :gutter="5" id="grid" icon-size="9vw">
        <grid-item
          :key="value"
          icon="shop-collect-o"
          text="核实商户"
          dot="true"
        />
        <grid-item :key="value" icon="shop-o" text="添加商户" />
        <grid-item :key="value" icon="todo-list-o" text="答题淘金" />
      </grid>
    </div>
    <div class="center1">
      <p id="p4"><span id="s1">成长奖励</span></p>
      <span id="s2">奖励说明<icon name="arrow" /></span>
    </div>
    <div class="center2">
      <div class="center2-left">
        <p id="p5">答题淘金被采纳50次(循环奖励)</p>
        <icon name="gold-coin-o" color="orange" size="5vw" />
        <span id="s3">50积分</span>
      </div>
      <div class="center2-right">
        <button id="btn1">去答题</button>
        <span id="s4">0/50</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { Icon, Grid, GridItem } from "vant";
import router from "../router";
const onCike = () => {
  router.go(-1);
};
</script>

<style scoped>
.icon-arrow-left:before {
  font-size: 30px;
}
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 8vh;
  /* background-color: antiquewhite; */
  padding: 10px;
}
#p1 {
  /* flex: 1; */
  text-align: center;
  font-size: 19px;
  margin-right: 40vw;
}
.information {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid rgba(231, 231, 231, 0.721);
  height: 30vw;
}
.m1 {
  width: 70px;
  height: 70px;
  border-radius: 50%;
}
#p2 {
  flex: 1;
  margin-left: 5vw;
  font-size: 5vw;
}
#btn {
  width: 23vw;
  height: 5.5vh;
  border-radius: 20px;
  text-align: center;
  line-height: 5.5vh;
  border: 1px solid#ccc;
  background: white;
}
#grid {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
#p3 {
  padding: 4vw;
  font-size: 5vw;
}
.center1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2vw 5vw 2vw 0;
}
#p4 {
  padding: 4vw;
  font-size: 5vw;
}
#s1 {
  display: block;
  padding: 2vw 0;
  position: relative;
}
#s1::before {
  content: "";
  width: 20vw;
  height: 1vw;
  background-image: linear-gradient(to right top, red, rgb(255, 225, 0));
  position: absolute;
  top: 40px;
  left: 0px;
  border-radius: 10px;
}
#s2 {
  color: #999;
}
.center2 {
  display: flex;
  justify-content: space-around;
  width: 95vw;
  height: 13vh;
  align-items: center;
  /* border-radius: 1px solid #ccc; */
  border: 1px solid rgba(231, 231, 231, 0.748);
  margin: 0 auto;
  border-radius: 10px;
}
#p5 {
  font-size: 17px;
  margin-bottom: 5px;
}
#s3 {
  color: #999;
  margin-left: 3px;
}
#btn1 {
  width: 20vw;
  height: 5.5vh;
  border-radius: 20px;
  text-align: center;
  line-height: 5.5vh;
  border: none;
  background-image: linear-gradient(to right top, red, rgb(255, 225, 0));
  color: white;
}
#s4 {
  display: block;
  text-align: center;
  margin-top: 3px;
  color: #999;
}
</style>